<template>
	<a-layout id="components-layout-demo-custom-trigger" @touchmove.prevent.stop="notouch">
		<a-layout-sider :trigger="null" collapsible v-model="collapsed" collapsedWidth="0" class="layout-sider">
			<van-overlay :show="overlayshow" @click="overlayshowisclick" :lock-scroll="false" duration="0.1">
				<!-- :lock-scroll="false" -->
				<div class="wrapper" @click.stop>
					<a-menu mode="inline" :openKeys="openKeys" @openChange="onOpenChange" theme="dark">
							<a-menu-item key="0" disabled>
								<span class="menu-header-title">品牌检索</span>
							</a-menu-item>
						<template v-for="(item,index) in menuList">
							<a-menu-item :key="item.id" v-if="!item.series">
								<span class="menu-header-title">{{item.name}}</span>
							</a-menu-item>
							<a-sub-menu :key="item.id" v-if="item.series">
								<span slot="title">
									<span class="menu-header-title">{{item.name}}</span>
								</span>
								<template v-for="(it,index) in item.series">
									<a-menu-item :key="it.id">{{it.name}}</a-menu-item>
								</template>
							</a-sub-menu>
						</template>
					</a-menu>
				</div>
			</van-overlay>
			
		</a-layout-sider>
		<a-layout>
		<a-layout-content
			:style="{minHeight: '500px' }"
			:class="!collapsed?'content-to-out':'content-to-back'"
		>
			
			<van-nav-bar title="标题" left-arrow :class="['header-title',isdetails?'f2':'f8',!collapsed?'hasOpen':'hasClose']" 
				@click-left="onClickLeft" @click-right="onClickRight">
				<template #left>
					<van-icon :name="newIcon2" v-if="isdetails" :class="[!collapsed?'takeSpin':'takeSpinOut']" size="20"/>
					<van-icon :name="newIcon4" v-else  size="20"/>
				</template>
				<template #title>
					<span class="hometitle">{{title}}</span>
				</template>
				<template #right>
					<van-icon :name="newIcon1" v-if="isdetails" :badge="shoppingcart" size="25"/>
					<van-icon :name="newIcon3" v-else size="25"/>
				</template>
			</van-nav-bar>
			<!-- 头部标题 -->

			<router-view class="homepage"></router-view>

		</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script>
import {_getBrandSeries} from '../service/main.js'
export default {
	name: 'Home',
	data() {
		return {
			collapsed: true,
			newIcon1: require('../assets/img/gouwuche.png'),
			newIcon2: require('../assets/img/homemune.png'),
			newIcon3: require('../assets/img/functionkey.png'),
			newIcon4: require('../assets/img/backicon.png'),
			rootSubmenuKeys:[],
			openKeys: [],
			title:"HALF GO",
			shoppingcart:0,
			overlayshow:false,
			menuList:[],
			isdetails:true,
		};
	},
	created(){
		this.getMenuList()
		this.isdetails=true
		if(this.$route.path=="/details"){
			this.isdetails=false
		}
	},
	computed:{
		setPageTitle(){
			return this.$store.state.HomePage.PageTitle
		}
	},
	watch:{
		$route: {
			handler: function(val, oldVal){
				console.log("routehandler")
				this.isdetails=true
				if(val.path.indexOf("/details")>-1){
					this.isdetails=false
				}else{
					this.title="HALF GO"
				}
			},
			deep: true
		},
		collapsed:{
			handler:function(val,oldVal){
				this.$store.state.HomePage.collapsed=this.collapsed
			},
		},
		setPageTitle(val){
			if(this.$route.path=="/details"){
				this.title=this.$store.state.HomePage.PageTitle
				console.log("/home",this.$store.state.HomePage.PageTitle)
			}
		}
	},
	methods:{
		notouch(){
			return
		},
		onOpenChange(openKeys) {
			const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
			if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
				this.openKeys = openKeys;
			} else {
				this.openKeys = latestOpenKey ? [latestOpenKey] : [];
			}
		},
		onClickLeft(){
			if(this.isdetails){
				this.collapsed=!this.collapsed
				this.overlayshow=!this.overlayshow
			}else{
				this.$router.push("/indexs")
			}
		},
		onClickRight(){
			
		},
		overlayshowisclick(){
			this.overlayshow=false
			this.collapsed=true

		},
		getMenuList(){
			let _this=this
			_getBrandSeries().then(res=>{
				_this.menuList=[]
				_this.menuList=[].concat(res.data)
				_this.openKeys=[]
				let idArr=[]
				res.data.forEach(element => {
					idArr.push(element.id)
				})
				_this.rootSubmenuKeys=[]
				_this.rootSubmenuKeys=[].concat(idArr)
				// console.log("idArr",idArr)
				// _this.openKeys=[].concat(res.data[0].id)
			})
		}
	}
}
</script>
<style lang="less">
.unsiding{
	position: fixed;
	top: 0;
	bottom: 0;
	overflow: hidden;
}


.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before{
	background: #fff !important;
}


.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
	background-color: #333 !important;
}
.ant-menu-dark .ant-menu-inline.ant-menu-sub{
	box-shadow: none !important;
}
#components-layout-demo-custom-trigger{
	min-height: 100%;
}
.home{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
.layout-sider{
	background-color: #f2f2f2 !important;
}
.leftmenu{
	position: fixed;
	height: 100%;
	width: 3%;
	background-color: #000;
	left: 0;
}
[class*=van-hairline]::after{
    border: none !important;
}

.van-info{
    min-width: 10px !important;
    line-height:10px !important;
    font-size: 10px !important;
    padding: 0 !important;
    border:none !important;
}
.van-overlay{
	z-index: 11 !important;
	background-color: rgba(0, 0, 0, 0) !important;
}

.menu-header-title{
	font-family: "PingFang Bold";
	font-size: 13px;
	color: #ffffff;
}
.ant-menu{
	width:200px !important;
	background-color: #B8B8B8 !important;
}
.wrapper{
	width: 200px !important;
	// overflow-y: auto;
	max-height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;;
}
.ant-menu-item{
	color: #fff;
	font-family: "PingFang Medium";
	font-size: 13px;
}
.ant-layout{
	background-color: #f2f2f2 !important;
}


.homepage{
	display: inline-block;
	width: 100%;
	height: 100%;
	float: right;
	// background-color: #F2F2F2;
}
.header-title{
	width: 100%;
	position: fixed !important;
	top: 0;
	right: 0;
	left: 0;
}
.f2{
	background-color: #f2f2f2 !important;
}
.f8{
	background-color: #f8f8f8 !important;
}
.hometitle{
	font-family:'DINCond-BlackAlternate';
	font-size: 24px;
}
.van-info{
	top: 10px !important;
}







@keyframes toRight{
	from{left: 0px;}
	to{left: 200px;}
}
@keyframes toLeft{
	from{left: 200px;}
	to{left: 0px;}
}
.hasOpen{
	animation:toRight ease .2s forwards ;
	-moz-animation:toRight ease .2s forwards ; /* Firefox */
	-webkit-animation:toRight ease .2s forwards ; /* Safari and Chrome */
	-o-animation:toRight ease .2s forwards ; /* Opera */
}
.hasClose{
	animation:toLeft ease .2s forwards ;
	-moz-animation:toLeft ease .2s forwards ; /* Firefox */
	-webkit-animation:toLeft ease .2s forwards ; /* Safari and Chrome */
	-o-animation:toLeft ease .2s forwards ; /* Opera */
}
@keyframes iconspinA {
	from{
		transform: rotate(0deg)
	}
	to{
		transform: rotate(90deg)
	}
}
@keyframes iconspinB {
	from{
		transform: rotate(90deg)
	}
	to{
		transform: rotate(0deg)
	}
}
.takeSpin{
	animation: iconspinA ease .2s forwards;
	-moz-animation:iconspinA ease .2s forwards ; /* Firefox */
	-webkit-animation:iconspinA ease .2s forwards ; /* Safari and Chrome */
	-o-animation:iconspinA ease .2s forwards ; /* Opera */
}
.takeSpinOut{
	animation: iconspinB ease .2s forwards;
	-moz-animation:iconspinB ease .2s forwards ; /* Firefox */
	-webkit-animation:iconspinB ease .2s forwards ; /* Safari and Chrome */
	-o-animation:iconspinB ease .2s forwards ; /* Opera */
}

@keyframes marginOut {
	from{
		margin-right: 0px;
	}
	to{
		margin-right: -230px;
	}
}
@keyframes marginBack {
	from{
		margin-right: -230px;
	}
	to{
		margin-right: 0px;
	}
}
.content-to-out{
	animation: marginOut ease .2s forwards;
	-moz-animation:marginOut ease .2s forwards ; /* Firefox */
	-webkit-animation:marginOut ease .2s forwards ; /* Safari and Chrome */
	-o-animation:marginOut ease .2s forwards ; /* Opera */
}
.content-to-back{
	animation: marginBack ease .2s forwards;
	-moz-animation:marginBack ease .2s forwards ; /* Firefox */
	-webkit-animation:marginBack ease .2s forwards ; /* Safari and Chrome */
	-o-animation:marginBack ease .2s forwards ; /* Opera */
}
</style>
